<template>
	<div id="home">
		<div id="hd" v-if="showMenu">
			<div id="hd-wrap">
				<div class="top-light"></div>
				<div id="logo">
					<img :src="url" class="logo" />
					<!-- <img src="https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/sysname.png"  class="logo"/> -->
					<h1 style="float:left;font-size:0.5rem;vertical-align:middle;">{{ site_name }}</h1>
					<!-- <h1 style="float:left;font-size:0.5rem;vertical-align:middle;">西安交大供暖监控系统</h1> -->
					<!-- <h1 style="float:left;font-size:0.5rem;vertical-align:middle;">安图县农业水价计量系统</h1> -->
				</div>
				<!-- <div id="weather" v-show="tianqi" class="wfull">
					<span class="typ">今日天气：{{today.wea}}</span><span class="tem">温度：{{today.tem2}}~{{today.tem1}}</span><span>风力：{{today.win_speed}}</span><br>
					<span class="typ">明日天气：{{torrmow.wea}}</span><span class="tem">温度：{{torrmow.tem2}}~{{torrmow.tem1}}</span><span>风力：{{torrmow.win_speed}}</span>
				</div> -->
				<!-- <span style="font-size:0.3rem;">元素像素:{{bodyheight}},屏幕像素:{{screenheight}}</span> -->
				<div style="width:8rem;height:1rem;float:right;">
					<!-- <div class="company">{{compName}}</div> -->
					<!-- <div class="exit" @click="goExit">退出</div> -->
					<div class="oper">
						<!-- <span class="conMenu" v-if="menu" @click="showMenu">显示菜单</span>
						<span class="conMenu" v-else @click="hiddMenu" style="color:white;">隐藏菜单</span> -->
						<el-dropdown placement="bottom" @command="handleCommand" class="operOpt" trigger="click">
							<span class="el-dropdown-link over" id="user">
								用户名: {{ ykuser }}<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown" class="dropdown" size="medium">
								<el-dropdown-item command="a" class="down">个人中心</el-dropdown-item>
								<el-dropdown-item command="b" class="down">修改密码</el-dropdown-item>
								<!-- <el-dropdown-item command="d" class="down">更换主题</el-dropdown-item> -->
								<el-dropdown-item command="e" class="down" style="border-top:1px solid #eee;">退出
								</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>

					<!-- <span class="full" v-if="soft" @click="fullScreen">全屏切换</span> -->

				</div>
			</div>
		</div>
		<!-- <div > -->
		<el-breadcrumb class="breadcrumb" ref="breadcrumb" :style="{ 'width': win.innerWidth - menuWidth - 10 + 'px' }"
			separator-class="el-icon-arrow-right">
			<el-breadcrumb-item v-for="(item, i) in listMenus" :key="item.value" :to="item.path">
				<span @click="changeBread(item)" :class="item.value == nowValue ? 'breadActive' : 'breadItem'">{{
					item.label }}</span>
				<i class="el-icon-circle-close" v-show="listMenus.length > 1" style="cursor:pointer;" title="点击移除"
					@click="deleteBread(item, i)"></i>
				<!-- <router-link :to="item.path" @click="changeBread(item.order)">{{item.label}}</router-link> -->
			</el-breadcrumb-item>
			<!-- <el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button> -->
		</el-breadcrumb>
		<!-- <div style="float:left;"><span @click="goBack" class="goback">设备管理</span>　|　<span>编辑网关设备</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button> -->
		<!-- </div> -->
		<div class="leftmenus menus" id="leftmenus" ref="leftmenus" :class="isCollapse ? 'vmenu' : 'hmenu'" v-if="showMenu">
			<div id="lefthead" @click="changeCollapse" style="font-size:0.35rem;">
				<i v-if="!isCollapse" class="el-icon-menu"></i>
				<span v-if="!isCollapse" style="font-size:0.35rem;">菜单导航</span>
				<i v-if="!isCollapse" class="el-icon-back"></i>
				<i v-else class="el-icon-right"></i>
			</div>
			<el-menu :default-active="indexPath" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
				@select="handleSelect" router ref="menu" unique-opened :collapse="isCollapse"
				style="width:100%;text-align:left;border:none;overflow: auto;" background-color="#061E26" text-color="#fff"
				active-text-color="deepskyblue">
				<!--active-text-color:#ffd04b -->
				<!-- <el-menu-item index="1" :route="{'name':'home'}" class="menuItem">
					<i class="el-icon-s-home"></i>
					<span slot="title">首页</span>
				</el-menu-item> -->
				<!-- <el-menu-item index="1" :route="{'name':'home'}" class="menuItem">
					<i class="el-icon-location"></i>
					<span slot="title">设备地图</span>
				</el-menu-item> -->
				<el-menu-item index="2" :route="{ 'name': 'showData' }" class="menuItem">
					<i class="el-icon-s-platform"></i>
					<span slot="title">监控中心</span>
				</el-menu-item>
				<!-- <el-menu-item index="20" :route="{ 'name': 'showScreen' }" class="menuItem">
					<i class="el-icon-data-analysis"></i>
					<span slot="title">大屏监控</span>
				</el-menu-item> -->

				<el-submenu index="20" class="hasSub">
					<template slot="title">
						<i class="el-icon-data-analysis"></i>
						<!-- 空格占位，勿删 -->
						<span class="submenuSpan">大屏显示</span>
					</template>
					<el-menu-item index="20-1" :route="{ 'name': 'largeScreen' }" class="menuItem">
						<span slot="title">大屏监控</span>
					</el-menu-item>
					<el-menu-item index="20-2" :route="{ 'name': 'largeScreenNew' }" class="menuItem">
						<span slot="title">能耗大屏</span>
					</el-menu-item>
					<el-menu-item index="20-3" :route="{ 'name': 'showScreenMap' }" class="menuItem">
						<span slot="title">地图大屏</span>
					</el-menu-item>
					<el-menu-item index="20-5" :route="{ 'name': 'largeScreenConfig' }" class="menuItem">
						<span slot="title">配置大屏</span>
					</el-menu-item>
					<!-- 大屏配置 -->
					<el-menu-item index="20-4" :route="{ 'name': 'configLarge' }" class="menuItem">
						<span slot="title">大屏配置</span>
					</el-menu-item>

				</el-submenu>
				<!-- <el-menu-item v-else index="2" :route="{'name':'showDataThree'}" class="menuItem">
					<i class="el-icon-s-platform"></i>
					<span slot="title">监控中心</span>
				</el-menu-item> -->
				<!-- <el-menu-item index="3" :route="{'name':'showTotal'}" class="menuItem">
					<i class="el-icon-data-analysis"></i>
					<span slot="title">大屏监控</span>
				</el-menu-item> -->
				<el-menu-item index="4" :route="{ 'name': 'alarm' }" class="menuItem">
					<i class="el-icon-message-solid"></i>
					<span slot="title">报警信息</span>
				</el-menu-item>
				<el-menu-item index="5" v-if="userType <= 2" :route="{ 'name': 'productList' }" class="menuItem">
					<i class="el-icon-notebook-2"></i>
					<span slot="title">项目管理</span>
				</el-menu-item>
				<el-submenu index="7" class="hasSub">
					<template slot="title">
						<i class="el-icon-s-tools"></i>
						<!-- 空格占位，勿删 -->
						<span class="submenuSpan">设备管理　</span>
						<!-- <span v-else class="submenuSpan">设备列表　</span> -->
					</template>
					<!-- <el-menu-item-group> -->
					<el-menu-item index="7-1" :route="{ 'name': 'device', 'path': 'device' }"
						style="font-size:0.3rem;text-indent:0.94rem;padding:0 0.1rem;">网关设备
					</el-menu-item>
					<!-- <el-menu-item index="7-2" :route="{'name':'directDevice','path':'directDevice'}"
						style="font-size:0.3rem;text-indent:0.94rem;padding:0 0.1rem;">直连设备</el-menu-item> -->
					<el-menu-item index="7-3" :route="{ 'name': 'virtualDevice', 'path': 'virtualDevice' }"
						style="font-size:0.3rem;text-indent:0.94rem;padding:0 0.1rem;">虚拟设备</el-menu-item>
					<!-- <el-menu-item index="7-3" disabled style="font-size:0.3rem;">透传设备</el-menu-item> -->
					<!-- <el-menu-item index="7-4" :route="{'name':'singleDevice','path':'singleDevice'}" style="font-size:0.3rem;" disabled>单设备网关</el-menu-item> -->
					<!-- <el-menu-item index="7-5" :route="{'name':'shareDevice','path':'shareDevice'}"
						style="font-size:0.3rem;border-top:1px dotted #ccc;text-indent:0.94rem;padding:0 0.1rem;">设备分享</el-menu-item> -->
					<!-- </el-menu-item-group> -->
				</el-submenu>
				<el-menu-item index="8" class="menuItem" :route="{ 'name': 'viewList' }">
					<i class="el-icon-postcard"></i>
					<span slot="title">组态管理</span>
				</el-menu-item>
				<el-menu-item index="9" v-if="userType <= 2" :route="{ 'name': 'transpondData' }" class="menuItem">
					<i class="el-icon-s-promotion"></i>
					<span slot="title">数据转发</span>
				</el-menu-item>
				<el-menu-item index="10" v-if="userType <= 2" :route="{ 'name': 'happen' }" class="menuItem">
					<i class="el-icon-s-opportunity"></i>
					<span slot="title">触发器管理</span>
				</el-menu-item>
				<el-menu-item index="19" v-if="userType <= 2" :route="{ 'name': 'report' }" class="menuItem">
					<i class="el-icon-date"></i>
					<span slot="title">报表管理</span>
				</el-menu-item>
				<el-menu-item index="11" v-if="userType <= 2" :route="{ 'name': 'camera' }" class="menuItem">
					<i class="el-icon-video-camera"></i>
					<span slot="title">摄像头管理</span>
				</el-menu-item>
				<el-menu-item index="15" :route="{ 'name': 'knowledge' }" class="menuItem">
					<i class="el-icon-notebook-1"></i>
					<span slot="title">知识库管理</span>
				</el-menu-item>
				<!-- <el-menu-item index="12" v-if="userType <= 2" :route="{ 'name': 'mould' }" class="menuItem">
					<i class="el-icon-coin"></i>
					<span slot="title">模板管理</span>
				</el-menu-item> -->
				<el-menu-item v-if="userType <= 2" index="13" :route="{ 'name': 'user' }" class="menuItem">
					<i class="el-icon-s-custom"></i>
					<span slot="title">用户管理</span>
				</el-menu-item>
				<el-menu-item v-if="userType == 1" index="14" :route="{ 'name': 'setSite' }" class="menuItem">
					<i class="el-icon-setting"></i>
					<span slot="title">系统设置</span>
				</el-menu-item>
				<!-- <el-submenu index="14" v-if="allowFinance==1" style="border-bottom: 1px solid #ccc;" class="hasSub">
					<template slot="title">
						<i class="el-icon-bank-card"></i>
						<span class="submenuSpan">财务管理　</span>
					</template>
					<el-menu-item index="14-1" :route="{'name':'financeInfo','path':'financeInfo'}" style="font-size:0.3rem;text-indent:0.94rem;padding:0 0.1rem;">概况
					</el-menu-item>
					<el-menu-item index="14-2" :route="{'name':'incomeAndExpense','path':'incomeAndExpense'}"
						style="font-size:0.3rem;text-indent:0.94rem;padding:0 0.1rem;">收支明细</el-menu-item>
					<el-menu-item index="14-3" :route="{'name':'orderList','path':'orderList'}"
						style="font-size:0.3rem;text-indent:0.94rem;padding:0 0.1rem;">订单</el-menu-item>
				</el-submenu> -->
			</el-menu>
		</div>
		<!-- </el-col> -->
		<!-- </el-row> -->
		<!-- <transition name="slide-left"> -->
		<!-- <transition name="fade"> -->
		<!-- <keep-alive> -->
		<!-- <router-view id="rightlist" ref="rightlist" :class="isCollapse?'all':'half'"></router-view> -->
		<!-- </keep-alive> -->
		<keep-alive>
			<router-view v-if="$route.meta.keepAlive" id="rightlist"
				:style="{ 'width': win.innerWidth - menuWidth - 10 + 'px' }" ref="rightlist">
			</router-view>
		</keep-alive>
		<!-- <transition name="fade"> -->
		<router-view v-if="!$route.meta.keepAlive" id="rightlist"
			:style="{ 'width': win.innerWidth - menuWidth - 10 + 'px' }" ref="rightlist">
		</router-view>
		<!-- </transition> -->
		<!-- <footer class="bottom" v-show="showMenu" id="foot">
			公司名称: {{compName}}　　电话: {{compMobile}}　　公司地址: {{compAddr}}　　备案号:<a href="http://beian.miit.gov.cn" target="_blank" style="text-decoration:none;color:deepskyblue;">陕ICP备1700561号-4</a>
		</footer> -->
		<!-- <footer class="bottom" v-show="showMenu" id="foot">
			ICP备案号:<a href="http://beian.miit.gov.cn" target="_blank" style="text-decoration:none;color:deepskyblue;">陕ICP备1700561号-4</a>
		</footer> -->
		<!-- <footer class="bottom" id="foot">
			宽度{{win.screen.width}}  高度{{win.screen.height}}
		</footer> -->
		<el-dialog :visible.sync="dialogFormVisible" width="30%" custom-class="dlog" append-to-body :show-close="close"
			top="180px">
			<div class="toptit">
				<span>修改密码</span>
				<span style="float:right;cursor: pointer;" @click="closeDialog">关闭</span>
			</div>
			<el-form :model="adminForm" block style="margin-top:0.3rem;text-align:left;">
				<el-form-item label="原密码:" :label-width="formLabelWidth">
					<el-input v-model="adminForm.old_pass" auto-complete="off" id="oldPass" type="password" class="inpu">
					</el-input><i class="el-icon-view flr" @click="showOldPass"></i>
				</el-form-item>
				<el-form-item label="新密码:" :label-width="formLabelWidth">
					<el-input v-model="adminForm.user_pass" auto-complete="off" id="newPass" type="password" class="inpu">
					</el-input><i class="el-icon-view flr" @click="showNewPass"></i>
				</el-form-item>
				<el-form-item label="确认密码:" :label-width="formLabelWidth">
					<el-input v-model="adminForm.check_pass" auto-complete="off" id="surePass" type="password" class="inpu">
					</el-input><i class="el-icon-view flr" @click="showSurePass"></i>
				</el-form-item>
			</el-form>
			<div slot="footer" style="text-align:right;">
				<el-button type="success" size="small" @click="modPwd">确 定</el-button>
				<el-button type="primary" size="small" @click="dialogFormVisible = false">取 消</el-button>
			</div>
		</el-dialog>
		<!--<el-dialog :visible.sync="dialogFormVisible_3" width="30%" custom-class="dlog" append-to-body :show-close="close" top="60px">
			<div class="toptit">
				<span>更换主题</span>
				<span style="float:right;cursor: pointer;" @click="closeDialog_3">关闭</span>
			</div>
			<el-form :model="colorForm" inline style="line-height:0.7rem;text-align:left;margin-top:0.3rem;padding-left:1rem;">
				<h3 class="view">主界面设置</h3>
				<el-form-item label="主题背景色:" :label-width="formLabelWidth_2" class="item">
					<el-input v-model="colorForm.bgcolor" auto-complete="off" type="text" class="inpu" placeholder="请选择或输入色值"></el-input>
					<el-color-picker class="pick" v-model="colorForm.bgcolor" show-alpha :predefine="predefineColors">
					</el-color-picker>
				</el-form-item>
				<el-form-item label="主文字颜色:" :label-width="formLabelWidth_2" class="item">
					<el-input v-model="colorForm.color" auto-complete="off" type="text" class="inpu" placeholder="请选择或输入色值"></el-input>
					<el-color-picker class="pick" v-model="colorForm.color" show-alpha :predefine="predefineColors">
					</el-color-picker>
				</el-form-item>
				<el-form-item label="激活背景色:" :label-width="formLabelWidth_2" class="item">
					<el-input v-model="colorForm.activeColor" auto-complete="off" type="text" class="inpu" placeholder="请选择或输入色值"></el-input>
					<el-color-picker class="pick" v-model="colorForm.activeColor" show-alpha :predefine="predefineColors">
					</el-color-picker>
				</el-form-item>
				<el-form-item label="激活文字色:" :label-width="formLabelWidth_2" class="item">
					<el-input v-model="colorForm.wordColor" auto-complete="off" type="text" class="inpu" placeholder="请选择或输入色值"></el-input>
					<el-color-picker class="pick" v-model="colorForm.wordColor" show-alpha :predefine="predefineColors">
					</el-color-picker>
				</el-form-item>
				<el-form-item label="底部背景色:" :label-width="formLabelWidth_2" class="item">
					<el-input v-model="colorForm.bottomColor" auto-complete="off" type="text" class="inpu" placeholder="请选择或输入色值"></el-input>
					<el-color-picker class="pick" v-model="colorForm.bottomColor" show-alpha :predefine="predefineColors">
					</el-color-picker>
				</el-form-item><br>
				<el-form-item label="底部文字色:" :label-width="formLabelWidth_2" class="item">
					<el-input v-model="colorForm.bwColor" auto-complete="off" type="text" class="inpu" placeholder="请选择或输入色值"></el-input>
					<el-color-picker class="pick" v-model="colorForm.bwColor" show-alpha :predefine="predefineColors">
					</el-color-picker>
				</el-form-item><br>
				<h3 class="view">登录界面设置</h3>
				<el-form-item label="登录背景图片:" :label-width="formLabelWidth_2" class="upload">
					<div class="oldimg">
						<img :src="colorForm.bgUrl" id="thumb" class="thumb" />
						<div v-if="doing" class="nowgo">正在上传...</div>
						<input type="file" id="addid" @change="addUpload" alt="" />
					</div>
					<span class="tip">点击图片可更换</span>
				</el-form-item><br>
			</el-form>
			<div  style="text-align:right;height:1rem;padding:0;">
				<el-button type="success" size="medium" @click="editColor">在线配色</el-button>
				<el-button type="success" size="medium" @click="modColor">确 定</el-button>
				<el-button type="primary" size="medium" @click="dialogFormVisible_3 = false">取 消</el-button>
			</div>
		</el-dialog> -->

	</div>
</template>

<script>
export default {
	name: 'mainMenu',
	data() {
		return {
			listMenus: [],
			nowValue: '',
			startFontSize: 51.4,
			userId: localStorage.getItem("at_userId"),
			userType: localStorage.getItem("atuser_type"),
			//grade: localStorage.getItem("grade"),
			indexPath: '2',
			sub: null,
			url: 'https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/ykwdlogo.png',
			mshow: true,
			showMenu: true,
			showNow: false,
			formLabelWidth: '2.2rem',
			//全局报警相关函数
			Socket: null,
			wsUrl: this.$wssUrl,
			timer: null,
			tokenTimer: null,
			isCollapse: true,
			menu: false,
			close: false,
			win: window,
			//nowtime:'',
			baseurl: this.$baseurl,
			menuWidth: '10vw',
			//today:{},
			//torrmow:{},
			//tianqi:false,
			site_name: localStorage.getItem("site_name"),
			allowFinance: Number(localStorage.getItem("allowFinance")) || 0,
			isDeveloper: Number(localStorage.getItem('isDeveloper')) || 0,
			//copyright: '未知',
			//ICP: '未知',
			//city:'',
			//doing:false,
			//compAddr:'',
			//compName:'',
			//compMobile:'',
			//screenheight:0,
			//bodyheight:0,
			ykuser: null,
			soft: false,
			id: null,
			dialogFormVisible: false,
			//dialogFormVisible_2: false,
			//dialogFormVisible_3: false,
			adminForm: {
				old_pass: '',
				user_pass: '',
				check_pass: ''
			},
			active: {
				backgroundColor: '#2c2c2c',
				color: 'deepskyblue!important',
				//color: '#fff!important',
				//textShadow: '6px 6px 2px rgba(220,220,220,0.5)'
				textShadow: '0px 0px 15px rgba(0,191,255,0.8)'
			},
			topeach: {
				color: 'white',
				backgroundColor: '#061E26',
			},
			bottomColor: '#061E26',
			color: '#ffffff',
			bwColor: '#fff',
			// cveColor:'red',
			activeColor: '#2c2c2c',
			bgcolor: '#061E26',
			colorForm: {
				bottomColor: '#061E26',
				color: '#ffffff',
				activeColor: '#2c2c2c',
				bgcolor: '#061E26',
				wordColor: '#fff',
				bwColor: "#fff"
				//pos:"center",
				//bgUrl:"https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/bgtest.jpg"
			}
			// predefineColors: [
			// 	'#222831',
			// 	'#F1F8FC',
			// 	'#ADF539',
			// 	'#ff4500',
			// 	'#ff8c00',
			// 	'#ffd700',
			// 	'#90ee90',
			// 	'#00ced1',
			// 	'#1e90ff',
			// 	'#c71585',
			// 	'rgba(46,139,87,1)',
			// 	'rgba(103, 194, 58,1)',
			// 	'rgba(255, 69, 0, 0.68)',
			// 	'rgb(255, 120, 0)',
			// 	'hsv(51, 100, 98)',
			// 	'hsva(120, 40, 94, 0.5)',
			// 	'hsl(181, 100%, 37%)',
			// 	'hsla(209, 100%, 56%, 0.73)',
			// ],
			//formLabelWidth: '80px',
			//formLabelWidth_2: '120px',
		}
	},
	// watch: {
	// 	activeColor: function() {
	// 		return this.colorForm.activeColor;
	// 	}
	// },
	//监听后路由会实时变动，不然需要手动刷新路径才会改变
	watch: {
		$route(to, from) {
			var that = this;
			//console.log(to.name);
			setTimeout(function () {
				that.$refs.rightlist.$el.style.height = window.innerHeight - 2 * that.startFontSize + 'px';
				that.menuWidth = that.$refs.leftmenus.offsetWidth;
				//document.getElementById("rightlist").style.width=window.innerWidth-menuWidth - 10+'px';
				that.$refs.rightlist.$el.style.width = window.innerWidth - that.menuWidth - 10 + 'px';
			}, 500)
			for (let i = 0, len = this.listMenus.length; i < len; i++) {
				if (this.listMenus[i].value == to.name) {
					this.listMenus.splice(i, 1,
						{
							value: to.name,
							path: to.name,
							label: to.meta.title,
							order: to.meta.order
						});
					this.nowValue = to.name;
					localStorage.setItem("listMenus", JSON.stringify(that.listMenus));
					return;
				}
			}
			if (to.name != 'showData' && to.name != 'mainData' && to.name != 'mainView') {
				this.listMenus.push({
					value: to.name,
					path: to.name,
					label: to.meta.title,
					order: to.meta.order
				});
				this.nowValue = to.name;
				localStorage.setItem("listMenus", JSON.stringify(that.listMenus));

			}
			this.$forceUpdate();
		}
	},

	beforeRouteEnter(to, from, next) {
		//不可以访问this,;
		//setTimeout(function(){
		next(vm => {  //vm指向vue实例，取代this；
			if (['deviceSet', 'showData', 'mainData', 'mainView', 'profile', 'largeScreen', 'largeScreenMap', 'largeScreenNew'].indexOf(from.name) >= 0) {
				vm.getToken();
        setTimeout(function () {
        	vm.$refs.rightlist.$el.style.height = window.innerHeight - 2 * vm.startFontSize + 'px';
        	vm.menuWidth = vm.$refs.leftmenus.offsetWidth;
        	//document.getElementById("rightlist").style.width=window.innerWidth-menuWidth - 10+'px';
        	vm.$refs.rightlist.$el.style.width = window.innerWidth - vm.menuWidth - 10 + 'px';
        }, 500)
				for (let i = 0, len = vm.listMenus.length; i < len; i++) {
					if (vm.listMenus[i].value == from.name) {
						vm.listMenus.splice(i, 1,
							{
								value: from.name,
								path: from.path,
								label: from.meta.title,
								order: from.meta.order
							});
						localStorage.setItem("listMenus", JSON.stringify(vm.listMenus));
						return;
					}
				}

				vm.listMenus.push({
					value: from.name,
					path: from.path,
					label: from.meta.title,
					order: from.meta.order
				});
				localStorage.setItem("listMenus", JSON.stringify(vm.listMenus));
			}
			//vm.showNow=true;
		})
		// },500)



	},



	methods: {
		// goBack(){
		// 	var that=this;
		// 	this.$router.go(-1);
		// 	// console.log(this.$route.matched);
		// 	// setTimeout(function(){
		// 	// 	that.indexPath=that.$route.matched[1].meta.order;
		// 	// 	that.nowValue=that.$route.matched[1].name;

		// 	// },1000)
		// 	// console.log(this.$route.matched[1].meta.order);
		// 	// localStorage.setItem('indexPath', this.indexPath);

		// },
		handleOpen(key, keyPath) {
			this.sub = keyPath[0];
		},

		handleClose(key, keyPath) {
			localStorage.setItem("closePath", keyPath);
			//this.closePath=localStorage.getItem("indexPath");
		},
		handleSelect(key, keyPath) {
			var that = this;
			//console.log(key,keyPath);
			setTimeout(function () {
				//document.getElementById("rightlist").style.height = window.innerHeight-2.23*that.startFontSize+'px';
				that.$refs.rightlist.$el.style.height = window.innerHeight - 2 * that.startFontSize + 'px';

			}, 1000)
			if (this.sub) {
				this.$refs.menu.close(this.sub);
			}
			if (keyPath.length == 1 && keyPath[0] != 2 && keyPath[0] != 3) {
				this.indexPath = keyPath[0];
				//console.log(this.indexPath);
				localStorage.setItem('indexPath', keyPath[0]);
			} else if (keyPath.length == 2) {
				this.indexPath = keyPath[1];
				localStorage.setItem('indexPath', keyPath[1]);
			}

		},
		changeCollapse() {
      var that=this;
			this.isCollapse = !this.isCollapse;
			if (this.isCollapse) {
				localStorage.setItem("isCollapse", true);
			} else {
				localStorage.setItem("isCollapse", false);
			}
			setTimeout(function () {
				that.menuWidth = document.getElementById("leftmenus").offsetWidth;
				document.getElementById("rightlist").style.width = window.innerWidth - that.menuWidth - 10 + 'px';
			}, 500)
		},
		// goPlatForm(){
		// 	this.$router.push({
		// 		path: '/showData',
		// 		name: 'showData',
		// 		component: 'showData'
		// 	});
		// 	localStorage.setItem('indexPath','1');
		// },
		changeMenu() {
			this.mshow = !this.mshow;
			//this.menu=!this.menu;
			if (!this.mshow) {
				document.getElementById("lefthead").style.backgroundColor = "rgba(0,0,0,0.5)";
				document.getElementById("lefthead").style.height = "0.8rem";
				document.getElementById("lefthead").style.lineHeight = "0.8rem";
			} else {
				document.getElementById("lefthead").style.backgroundColor = this.bgcolor;
				document.getElementById("lefthead").style.height = "1rem";
				document.getElementById("lefthead").style.lineHeight = "1rem";
			}
		},

		changeBread(item) {
			this.indexPath = item.order;
			localStorage.setItem('indexPath', item.order);
		},

		deleteBread(item, i) {
			event.stopPropagation();
			var that = this;
			this.listMenus.splice(i, 1);
			localStorage.setItem("listMenus", JSON.stringify(that.listMenus));
			if (this.nowValue == item.value) {
				setTimeout(function () {
					that.$router.push({
						path: that.listMenus[that.listMenus.length - 1].path,
						name: that.listMenus[that.listMenus.length - 1].value,
						component: that.listMenus[that.listMenus.length - 1].value
					});
					that.nowValue = that.listMenus[that.listMenus.length - 1].value;
					that.indexPath = that.listMenus[that.listMenus.length - 1].order;
					localStorage.setItem('indexPath', that.indexPath);
				}, 500)
			}
		},

		// getWeather(city) {
		// 	var that = this;
		// 	fetch("https://www.tianqiapi.com/api/?version=v1&appid=56695554&appsecret=BkVKcM9h&city=" + city)
		// 		.then(res => res.json())
		// 		.then(function(data) {
		// 			that.today = data.data[0];
		// 			that.torrmow = data.data[1];
		// 			//console.log(data);
		// 		})
		// 		.catch(error => {
		// 			console.log(error)
		// 		});
		// },

		handleCommand(command) {
			var that = this;
			switch (command) {
				case 'a':
					this.$router.push({
						path: '/profile',
						name: 'profile',
						component: 'profile'
					});
					break;
				case 'b':
					this.dialogFormVisible = true;
					break;
				case 'd':
					this.dialogFormVisible_3 = true;
					break;
				case 'e':
					this.$message.closeAll();
					this.$notify.closeAll();
					this.listMenus = [];
					this.$router.push({
						path: '/',
						name: 'Login',
						component: 'Login'
					});
					localStorage.clear();
					clearInterval(that.allAlarmTimer);
					if (this.allAlarmSocket) {
						this.allAlarmSocket.close();
					}
					clearInterval(that.tokenTimer);
					break;
			}
		},

		showOldPass(event) {
			if (document.getElementById("oldPass").type == "password") {
				document.getElementById("oldPass").type = "text";
				event.target.style.color = "deepskyblue";
			} else {
				document.getElementById("oldPass").type = "password";
				event.target.style.color = "#ccc";
			}

		},
		showNewPass(event) {
			if (document.getElementById("newPass").type == "password") {
				document.getElementById("newPass").type = "text";
				event.target.style.color = "deepskyblue";
			} else {
				document.getElementById("newPass").type = "password";
				event.target.style.color = "#ccc";
			}
		},

		showSurePass(event) {
			if (document.getElementById("surePass").type == "password") {
				document.getElementById("surePass").type = "text";
				event.target.style.color = "deepskyblue";
			} else {
				document.getElementById("surePass").type = "password";
				event.target.style.color = "#ccc";
			}
		},

		// goExit(){
		// 	this.$message.closeAll();
		// 	this.$notify.closeAll();
		// 	this.$router.push({
		// 		path: '/',
		// 		name: 'Login',
		// 		component: 'Login'
		// 	});
		// 	localStorage.removeItem("attoken");
		// 	localStorage.removeItem("yk_retoken");
		// 	localStorage.removeItem("userId");
		// 	localStorage.removeItem("ykuser");
		// 	localStorage.removeItem("grade");
		// 	localStorage.removeItem("site_name");
		// 	localStorage.removeItem("site_auth");
		// },

		modPwd() {
			var that = this;
			this.adminForm.id = localStorage.getItem("at_userId");
			this.$http({
				method: 'post',
				url: 'api/user/updatePassword',
				data: that.adminForm
			}).then(res => {
				if (res && res.data.result == "success") {

					this.$message({
						message: '恭喜，密码修改成功!',
						type: 'success',
						center: true
					});
					this.dialogFormVisible = false;

				}
			}).catch(error => {
				console.log(error);
			});
		},
		randomstr(len) {
			len = len || 32;
			var chars = 'ABCDEFGHJKMNPQRSTVUWXYZabcdefhijkmnprstuvwxyz123456789';
			var maxPos = chars.length;
			var pwd = '';
			for (var i = 0; i < len; i++) {
				pwd += chars.charAt(Math.floor(Math.random() * maxPos));
			}
			return pwd;
		},
		//上传登录背景（单图上传）
		// async addUpload() {

		// 	var fileLen = document.getElementById('addid').files
		// 	var file=fileLen[0];
		// 	let random_name = this.randomstr(8)+ '.' + file.name.split('.').pop();
		// 	let newname='yunken/'+random_name;
		// 	this.doing=true;
		// 	 try {
		// 		let result = await client.put(newname,file);         //有await时，函数前必须有async
		// 		this.colorForm.bgUrl=result.url;
		// 		//localStorage.setItem("bgUrl",this.colorForm.bgUrl);
		// 		this.doing=false;
		// 		//console.log(this.colorForm.bgUrl)
		// 	   } catch (error) {
		// 		  console.log(error);
		// 	  }
		// },

		// editColor() {
		//              this.$confirm("在线配色需要手动将色值填入对应输入框中，是否继续？点击'确定'继续，点击'取消'放回！", '提示', {
		// 		confirmButtonText: '确定',
		// 		cancelButtonText: '取消',
		// 		type: 'warning'
		// 	}).then(() => {
		// 		window.open('http://www.peise.net/tools/web/', 'newwindow',
		// 			'height=750, width=1000, top=100, left=40, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no'
		// 		)
		// 	}).catch(() => {
		//                  //
		// 	});
		// },
		// modColor() {
		// 	localStorage.setItem("bottomColor", this.colorForm.bottomColor);
		// 	localStorage.setItem('pos', this.colorForm.pos);
		// 	localStorage.setItem("bgUrl",this.colorForm.bgUrl);
		// 	localStorage.setItem("color", this.colorForm.color);
		// 	localStorage.setItem("bgcolor", this.colorForm.bgcolor);
		// 	localStorage.setItem("wordColor", this.colorForm.wordColor);
		// 	localStorage.setItem("bwColor", this.colorForm.bwColor);
		// 	this.active.backgroundColor = this.colorForm.activeColor;
		// 	this.active.color = this.colorForm.wordColor + '!important';
		// 	this.topeach.backgroundColor = this.colorForm.bgcolor;
		// 	this.topeach.color = this.colorForm.color;
		// 	localStorage.setItem("activeColor", this.colorForm.activeColor);
		// 	window.document.getElementById("hd").style.backgroundColor = this.colorForm.bgcolor;
		// 	window.document.getElementById("hd").style.color = this.colorForm.color;
		// 	window.document.getElementById("lefthead").style.backgroundColor = this.colorForm.bgcolor;
		// 	window.document.getElementById("lefthead").style.color = this.colorForm.color;
		// 	window.document.getElementById("foot").style.backgroundColor = this.colorForm.bottomColor;
		// 	window.document.getElementById("foot").style.color = this.colorForm.bwColor;
		// 	window.document.getElementById("user").style.color = this.colorForm.color;
		// 	this.dialogFormVisible_3 = false;
		// },
		onChange(event) {
			this.id = event.target.id;
		},
		closeDialog_3() {
			this.dialogFormVisible_3 = false;
		},
		closeDialog_2() {
			this.dialogFormVisible_2 = false;
		},
		closeDialog() {
			this.dialogFormVisible = false;
		}
	},
	beforeCreate() {
		if (localStorage.getItem("isFirst") == "true") {
			//window.location.reload();
			localStorage.setItem("isFirst", false)
		};
	},
	created() {
		var that = this;
		this.ykuser = localStorage.getItem("atuser") || null;
		if (!this.ykuser) {
			this.$message({
				message: '你还没有登录，请先登录！',
				center: true,
				type: 'warn'
			});
			this.$router.push({
				path: '/',
				name: 'Login',
				component: 'Login'
			})
			localStorage.clear();
			clearInterval(that.tokenTimer);

		}


		var start = document.getElementsByTagName("html")[0];  //获取根元素；
		this.startFontSize = parseFloat(getComputedStyle(start, null)['fontSize']);
		console.log(this.startFontSize);
		// this.listMenus = this.listMenus.length?this.listMenus:[{
		// 	value:'showData',
		// 	path:'showData',
		// 	label:'监控中心',
		// 	order:"2"
		// }];
		// this.listMenus = this.$parent.listMenus.length?Array.from(this.$parent.listMenus):[{
		// 	value:'showData',
		// 	path:'showData',
		// 	label:'监控中心',
		// 	order:"2"
		// }];

		this.listMenus = localStorage.getItem("listMenus") ? JSON.parse(localStorage.getItem("listMenus")) : [
			{
				value: 'showData',
				path: 'showData',
				label: '监控中心',
				order: "2"
			}];

		//console.log(this.$parent.listMenus);
		// if (this.listMenus.length == 1 && this.listMenus[0].order == '2') {
		// 	this.listMenus.push({
		// 		value: that.$route.matched[1].name,
		// 		path: that.$route.matched[1].name,
		// 		label: that.$route.matched[1].meta.title,
		// 		order: that.$route.matched[1].meta.order
		// 	});
		// 	localStorage.setItem("listMenus", JSON.stringify(that.listMenus));
		// }
		//this.$parent.listMenus = Array.from(this.listMenus);
		this.nowValue = that.$route.matched[1].name;
		//this.$route.matched;
		//this.listMenus=this.$route.matched
		localStorage.setItem("bgcolor", "#061E26"); //默认色#222831
		this.site_name = localStorage.getItem("site_name") || "设备监控平台";
		this.isCollapse = localStorage.getItem("isCollapse") == "true" ? true : false;
		this.indexPath = localStorage.getItem("indexPath") || '2';



		//this.colorForm.bgUrl = localStorage.getItem("bgUrl") || 'https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/bgtest.jpg';
		// this.colorForm.pos=localStorage.getItem('pos') || 'center';
		// this.bgcolor = localStorage.getItem("bgcolor") || '#222831';
		// this.color = localStorage.getItem("color") || '#fff';
		// this.bottomColor = localStorage.getItem("bottomColor") || '#222831';
		// this.activeColor = localStorage.getItem("activeColor") || '#2c2c2c';
		// this.active.backgroundColor = localStorage.getItem("activeColor") || '#222831';
		// this.active.color = localStorage.getItem("wordColor") || 'deepskyblue';
		// this.colorForm.color = localStorage.getItem("color") || '#fff';
		// this.colorForm.bottomColor = localStorage.getItem("bottomColor") || '#';
		// this.colorForm.bgcolor = localStorage.getItem("bgcolor") || '#222831';
		// this.colorForm.activeColor = localStorage.getItem("activeColor") || '#2c2c2c';
		// this.colorForm.wordColor = localStorage.getItem("wordColor") || 'deepskyblue';
		// this.colorForm.bwColor = localStorage.getItem("bwColor") || '#fff';
		this.url = (this.$baseurl + localStorage.getItem("loginLogo")) || "https://gou-bin.oss-cn-beijing.aliyuncs.com/yunken/ykwdlogo.png";

		//this.copyright = localStorage.getItem("copyright") || "未知";
		//this.ICP = localStorage.getItem("Icp") || "未知";
		//this.compAddr = localStorage.getItem("compAddr") || "未设置";
		//this.compName = localStorage.getItem("compName") || "西安云垦电子信息科技有限公司";
		//this.compMobile = localStorage.getItem("compMobile")|| "未设置";

	},

	mounted() {
		var that = this;
		//console.log(window.innerHeight,window.screen.availHeight);
		this.tokenTimer = setInterval(function () {
			that.getToken();
		}, 10200000);
		var box = document.getElementById("home");
		box.style.height = window.innerHeight + 'px';
		this.$refs.leftmenus.style.height = window.innerHeight + 'px';
		//var start = document.getElementsByTagName("html")[0];  //获取根元素；
		//this.startFontSize=parseFloat(getComputedStyle(start,null)['fontSize']); //获取根元素文字大小；
		//document.getElementById("rightlist").style.height = window.innerHeight-2.23*this.startFontSize+'px';
		this.$refs.rightlist.$el.style.height = window.innerHeight - 2 * this.startFontSize + 'px';
		window.document.getElementById("hd").style.backgroundColor = this.bgcolor;
		window.document.getElementById("hd").style.color = this.color;
		//window.document.getElementById("lefthead").style.backgroundColor = this.bgcolor;
		window.document.getElementById("leftmenus").style.backgroundColor = this.bgcolor;
		//window.document.getElementById("lefthead").style.color = this.color;
		//window.document.getElementById("foot").style.backgroundColor = this.bottomColor;
		//window.document.getElementById("foot").style.color = this.bwColor;
		window.document.getElementById("user").style.color = this.color;
		this.menuWidth = document.getElementById("leftmenus").offsetWidth;
		this.$refs.rightlist.$el.style.width = window.innerWidth - this.menuWidth - 10 + 'px';
		this.$refs.breadcrumb.$el.style.width = window.innerWidth - this.menuWidth - 10 + 'px';
		this.active.backgroundColor = this.activeColor;
		this.active.color = this.colorForm.wordColor;
		this.topeach.backgroundColor = this.bgcolor;
		this.topeach.color = this.color;
		// if (window.screen.height == 1200 && this.mshow) {
		// 	this.$refs.leftmenus.style.height = 18.2 + 'rem';
		// 	this.$refs.leftmenus.style.backgroundColor = "#061E26";
		// 	this.$refs.rightlist.$el.style.height = '18.3rem';

		// }
		// var oldHeight = document.getElementById("rightlist").offsetHeight;
		// setTimeout(function () {
		// 	//判断是否有书签栏
		// 	if (window.innerHeight == window.screen.availHeight - 71) {
		// 		document.getElementById("rightlist").style.cssText = ";height:" + (oldHeight + 30) +
		// 			"px!important";
		// 	}
		// }, 600)
	},
	beforeDestroy() {
		var that = this;
		this.$message.closeAll();
		this.$notify.closeAll();
	},
	destroyed() {
		var that = this;
		clearInterval(that.tokenTimer);
	}

}
</script>
<style scoped>
@media all and (max-width:1600px) {
	.menuItem span {
		margin-left: 0.1rem !important;
	}

	#lefthead {
		height: 40px !important;
		line-height: 40px !important;
	}

	.menuItem {
		height: 40px !important;
		line-height: 40px !important;
	}

	.hasSub {
		min-height: 40px !important;
		line-height: 40px !important;
	}

	.leftmenus>>>.el-submenu .el-menu-item {
		min-width: auto;
		height: 30px !important;
		line-height: 30px !important;
	}

	.hasSub>>>.el-submenu__title {
		height: 40px !important;
		line-height: 40px !important;
	}

	.leftmenus>>>.el-submenu__title {
		height: 40px !important;
		line-height: 40px !important;
	}
}

@media all and (max-width:1366px) {
	#lefthead {
		height: 32px !important;
		line-height: 32px !important;
		border-bottom: 2px solid white !important;
	}

	.menuItem {
		height: 34px !important;
		line-height: 34px !important;
	}

	.hasSub {
		min-height: 34px !important;
		line-height: 34px !important;
	}

	.leftmenus>>>.el-submenu .el-menu-item {
		min-width: auto;
		height: 28px !important;
		line-height: 28px !important;
	}

	.hasSub>>>.el-submenu__title {
		height: 34px !important;
		line-height: 34px !important;
	}

	.leftmenus>>>.el-submenu__title {
		height: 34px !important;
		line-height: 34px !important;
	}
}

.fade-enter-active,
.fade-leave-active {
	transition: opacity 600ms;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}

/*页面头部*/

#hd,
.hd {
	width: 100%;
	height: 1rem;
	color: white;
	background-color: #061E26;
	/* border:1px solid red; */
	/* background: linear-gradient(green,#1E9FFF); */
	/* background-color:seagreen; */
	/* background:url(../assets/topbg.png) repeat-x; */
	position: fixed;
	top: 0;
	z-index: 1;
}

.dropdown {
	display: block;
	min-width: 2.5rem;
}

.down {
	margin: 0 auto;
	display: block;
	width: 100%;
	height: 0.667rem;
	text-align: center;
	line-height: 0.667rem;
}

.el-dropdown-link {
	float: right;
	width: 100%;
	text-align: right;
	cursor: pointer;
	color: white;
	margin-right: 0.333rem;
}

.el-icon-arrow-down {
	font-size: 16px;
}

#hd-wrap,
.hd-wrap {
	position: relative;
	height: 1rem;
	background: url(../../static/topline.png) no-repeat left bottom;
}

.top-light {
	position: absolute;
	width: 5.767rem;
	height: 1rem;
	/* background: url(../assets/toplight.png); */
	top: 0;
	left: -0.3rem;
}

.uname {
	font-size: 0.267rem;
	color: white;
	display: inline-block;
	min-width: 2rem;
	margin-right: 0.1rem;
}

.modpwd {
	width: 1.333rem;
	height: 0.5rem;
	font-size: 0.267rem;
	display: inline-block;
	color: white;
	cursor: pointer;
}

.out {
	width: 0.833rem;
	height: 0.5rem;
	font-size: 0.267rem;
	display: inline-block;
	color: white;
	float: right;
	cursor: pointer;
	transform: translateX(0.3rem);
}

#home {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
	background: white;
}

.logo {
	float: left;
	vertical-align: top;
	margin-top: 0.1rem;
	/* position: absolute;
	left: -0.1rem; */
	margin-right: 0.2rem;
	/* top: 0.32rem; */
	min-width: 0.8rem;
	max-width: 5rem;
	/* text-align: right; */
	height: 0.8rem;
	/* border:1px solid red; */
}

#logo {
	float: left;
	min-width: 6.3rem;
	height: 1rem;
	line-height: 1rem;
	position: relative;
	left: 0.3rem;
	/* border:1px solid red; */
	/* top:-0.15rem; */
	color: inherit;
}

.hd #logo {
	min-width: 4.6rem;
}

.company {
	height: 0.5rem;
	text-align: right;
	color: inherit;
	margin-right: 0.333rem;
	margin-top: 0.1rem;
	font-size: 0.3rem;
}

#leftmenus {
	/* min-width:5%; */
	max-width: 10%;
	width: auto;
	/* height: 15.9rem; */
	height: calc(100vh - 1rem) !important;
	/* overflow: auto; */
	/* padding-top: 1.24rem; */
	/* background-color: #222831; */
	background-color: #061E26;
	/* border:1px solid red; */
}

.vmenu {
	position: fixed;
	top: 1rem;
	left: 0;
	bottom: 0;
	overflow-y: auto;
	/* margin-right: 0.5%;*/
	width: 10vw;
	z-index: 3;
}

.hmenu .top_each {
	height: 0 !important;
	overflow: hidden !important;
}

.hmenu {
	position: fixed;
	top: 1rem;
	left: 0;
	min-width: 4%;
	bottom: 0;
	/* height: 0.8rem; */
	/* overflow: hidden !important; */
	z-index: -1;
	/* border-radius:0 0.4rem 0.4rem 0; */
	-ms-transition: all 1000ms linear;
	-webkit-transition: all 1000ms linear;
	transition: all 1000ms linear;
}

.hmenu:hover {
	width: 4%;
	/* height:0.8rem; */
	/* transition: all 1s linear; */
}

#lefthead {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	line-height: 48px;
	/* border-top: 1px solid white; */
	color: white;
	font-size: 0.35rem;
	text-align: center;
	/* text-indent: 0.1rem; */
	background-color: #061E26;
	cursor: pointer;
	/* padding-right:0.1rem; */
	/* border-bottom: 1px solid white; */
}

#rightlist {
	/* height:16rem; */
	height: calc(100vh - 2rem);
	background-color: white;
	position: fixed;
	top: 2rem;
	right: 0;
	z-index: 1;
	margin: 0;
	padding: 0;
	/*如果为负,将影响elementUI的性能,尤其是下拉框将无法使用*/
	overflow: auto;
	width:auto;
	-ms-transition: all 300ms linear;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
	/* border:1px solid red; */
}

.breadcrumb {
	position: fixed;
	top: 1rem;
	right: 0;
	margin: 0 auto;
	z-index: 1;
	text-align: left;
	padding: 0 0.2rem;
	height: 1rem;
	font-size: 0.3rem;
	line-height: 1rem;
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	/* width:91vw; */
	/* border:1px solid red; */
	/* white-space: nowrap!important;
	    overflow-x: auto;
	    overflow-y: hidden; */
	/* overflow-y: hidden; */
	/* border: 1px solid red; */
}

/* #home /deep/ .el-breadcrumb{
		white-space: nowrap!important;
		overflow-x: auto;
		overflow-y: hidden;
	} */

.breadItem {
	font-weight: 700;
	color: #333;
	cursor: pointer;
	/* border:1px solid #ccc; */
}

.breadItem:hover {
	color: #409eff;
}

.breadActive {
	cursor: default;
	color: deepskyblue !important;
	/* border:1px solid deepskyblue; */
}

/* .breadActive span{
		color:deepskyblue;
	} */

.all {
	width: 96%;
	/* padding-left:0.2rem; */
}

.half {
	width: 91%;
}



.conMenu {
	float: left;
	display: inline-block;
	vertical-align: middle;
	color: #00FF00;
}

/* .btn {
		width: 1.4rem;
		height: 0.6rem;
		line-height: 0.6rem;
		text-align: center;
		font-size: 0.3rem;
		padding: 0 !important;
	} */

.allinpu {
	width: 5.833rem;
	height: 2.5rem;
	padding: 0.5rem 0.667rem 0 0;
	font-size: 0.333rem;
}

.inpu {
	display: inline-block;
	width: 5rem;
	height: 0.7rem;
	line-height: 0.7rem;
	vertical-align: top;
}

/* .oper {
		display: inline-block;
		vertical-align: top;
		width: 85%;
		height: 0.6rem;
		line-height: 0.6rem;
		text-align: right;
		font-size: 0.25rem;

	} */
/*如果不显示公司使用下面的oper类样式*/

.oper {
	float: right;
	vertical-align: top;
	width: auto;
	height: 1rem;
	line-height: 1rem;
	text-align: right;
	font-size: 0.3rem;
	/* border:1px solid red; */
}

.exit {
	float: right;
	vertical-align: top;
	min-width: 16%;
	height: 1rem;
	line-height: 1rem;
	text-align: center;
	/* border:1px solid green; */
	font-size: 0.3rem;
	margin-left: 0.1rem;
	cursor: pointer;


}

.full {
	display: inline-block;
	vertical-align: top;
	text-align: right;
	margin-right: 0.333rem;
	width: 15%;
	height: 0.6rem;
	line-height: 0.6rem;
	font-size: 0.25rem;
}

.upimg {
	width: 2rem;
	height: 2rem;
}

/* footer {
		position: fixed;
		bottom: 0;
		z-index:10;
		left: 0;
		width: 100%;
		height: 1rem;
		line-height: 1rem;
		font-size: 0.28rem;
		text-align: center;

	} */

.dlog {
	box-sizing: border-box;
	padding: 0 !important;
	position: relative;
}

.toptit {
	width: 100%;
	height: 0.8rem;
	line-height: 0.8rem;
	background-color: #eee;
	position: absolute;
	top: 0;
	left: 0;
	padding: 0 0.2rem;
}

.item {
	height: 0.7rem;
	line-height: 0.7rem;
}

.upload {
	height: 2.4rem;
}

#user {
	display: inline-block;
	font-size: 0.25rem;
	min-width: 2.6rem;
	max-width: 4rem;
	border: none;
	/* border:1px solid red; */
}

#addid {
	width: 3rem;
	height: 2rem;
	/* border:1px solid red; */
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 9999;
	opacity: 0;
}

.oldimg {
	width: 3rem;
	height: 2rem;
	cursor: pointer;
	border: 1px solid #ccc;
}

.thumb {
	width: 3rem;
	height: 2rem;
}

.view {
	transform: translateX(-0.3rem);
	height: 1rem;
	line-height: 1rem;
}

.hd {
	margin-bottom: 0.2rem;
	background-color: #0b2c51 !important;
	/* background-color: rgba(0,0,0,0.4)!important; */
	/* box-shadow: 0px 0px 10px 5px inset deepskyblue; */
}

.topword {
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -160px;
	margin-top: -40px;
}

.el-menu-vertical-demo i {
	font-size: 0.5rem;
	vertical-align: middle;
}

.menuItem {
	width: 100%;
	height: 48px;
	line-height: 48px;
	/* border-bottom: 1px solid #ccc; */
}

.hasSub {
	min-height: 48px;
	line-height: 48px;
}

.menuItem span {
	display: inline-block;
	margin-top: -1px;
	font-size: 0.32rem;
}

.submenuSpan {
	display: inline-block;
	margin-top: -1px;
	font-size: 0.32rem;
}

.leftmenus>>>.el-submenu .el-menu-item {
	min-width: auto;
	height: 40px;
	line-height: 40px;
	/* border:1px solid red; */
}

.hasSub>>>.el-submenu__title {
	height: 48px;
	line-height: 48px;
}

.leftmenus>>>.el-menu-vertical-demo:not(.el-menu--collapse) {
	min-width: auto;
	min-height: 400px;
}

.leftmenus .menuItem,
.leftmenus .hasSub {
	overflow: hidden;
	position: relative;
}

.leftmenus .menuItem::before,
.leftmenus .hasSub::before {
	position: absolute;
	top: 0;
	left: -90%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

.leftmenus .menuItem:hover::before,
.leftmenus .hasSub:hover::before {
	-webkit-animation: shine 600ms;
	animation: shine 600ms;
}

.flr {
	font-size: 0.4rem;
	vertical-align: middle;
	margin-left: 0.1rem;
	color: #ccc;
}

@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}

@keyframes shine {
	100% {
		left: 125%;
	}
}
</style>
